<template>
  <div class="idadd">
    <el-dialog
      :title="info ? '编辑' : '新增'"
      :visible.sync="dialogVisible"
      width="55%"
    >
      <el-form
        :inline="true"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="广告名称" prop="author">
          <el-input
            v-model="homeInfo.name"
            placeholder="广告名称"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="author">
          <el-input
            v-model="homeInfo.note"
            placeholder="备注"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="author">
          <el-input
            v-model="homeInfo.sort"
            placeholder="排序"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品数量" prop="author">
          <el-input
            v-model="homeInfo.productCount"
            placeholder="产品数量"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="链接" prop="author">
          <el-input
            v-model="homeInfo.url"
            placeholder="链接"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="首页轮播位置" prop="author">
          <el-select v-model="homeInfo.type" placeholder="请选择">
            <el-option
              v-for="item in optionser"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="author">
          <el-date-picker
            size="small"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="homeInfo.startTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="author">
          <el-date-picker
            size="small"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="homeInfo.endTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上下线状态" prop="author" style="width: 300px">
          <el-switch
            v-model="homeInfo.type"
            active-color="#409EFF"
            inactive-color="#DCEFE6"
            :active-value="1"
            :inactive-value="0"
            size="small"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="图片" prop="author">
          <el-upload
            style="
              width: 178px;
              height: 178px;
              margin-left: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            ref="upload"
            :action="uploadUrl"
            :headers="headers"
            :on-success="handleAvatarSuccess"
          >
            <div
              v-if="homeInfo.pic == ''"
              style="font-size: 30px; padding: 150px"
            >
              ＋
            </div>
            <img
              v-if="homeInfo.pic"
              :src="homeInfo.pic"
              style="height: 100px; width: 100px; margin-top: -100px"
              alt=""
            />
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="footers">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import marketing from '@/api/marketing'
import mixins from '@/mixins'
export default {
  mixins: [mixins],
  data() {
    return {
      info: '',
      dialogVisible: false,
      value: '',
      value1: '',
      homeInfo: {
        endTime: '', //结束时间
        name: '', //广告名称
        note: '', //备注
        pic: '', //图片
        productCount: '', //产品数量
        sort: '', //排序
        startTime: '', //开始时间
        status: '', //
        type: '',
        url: '', //链接
      },
      optionser: [
        {
          label: 'APP首页轮播',
          value: '0',
        },
        {
          label: '1',
          value: '1',
        },
      ],
    }
  },
  created() {},
  mounted() {},
  methods: {
    submit() {
      this.dialogVisible = false

      if (this.info) {
        marketing
          .updateAdsApis({
            endTime: this.homeInfo.endTime,
            name: this.homeInfo.name,
            note: this.homeInfo.note,
            pic: this.homeInfo.pic,
            productCount: this.homeInfo.productCount,
            sort: this.homeInfo.sort,
            startTime: this.homeInfo.startTime,
            status: this.homeInfo.status,
            type: this.homeInfo.type,
            url: this.homeInfo.url,
            id: this.info.id,
          })
          .then(res => {
            console.log(res, '编辑')
            this.$parent.adsListApi()
          })
      } else {
        marketing
          .addAdsApis({
            endTime: this.homeInfo.endTime,
            name: this.homeInfo.name,
            note: this.homeInfo.note,
            pic: this.homeInfo.pic,
            productCount: this.homeInfo.productCount,
            sort: this.homeInfo.sort,
            startTime: this.homeInfo.startTime,
            status: this.homeInfo.status,
            type: this.homeInfo.type,
            url: this.homeInfo.url,
            id: this.info.id,
          })
          .then(res => {
            console.log(res, 'res')
            console.log(this.homeInfo.startTime, this.homeInfo.endTime, '时间')
            this.$parent.adsListApi()
          })
      }
    },
    //子组件的打开方法
    open(data) {
      this.dialogVisible = true

      if (data) {
        console.log(data, 'data')

        this.homeInfo = data
        this.info = data
        console.log(this.info, 'this.info')
      } else {
        this.info = ''
      }
    },
    handleAvatarSuccess(res) {
      console.log(res, 'resss')
      if (res.success) {
        this.homeInfo.pic = res.data.fileUrl
        // this.$refs.upload.clearFiles()
      } else {
        this.$message.error('上传失败')
      }
    },
  },
}
</script>

<style scoped lang="scss">
.idadd ::v-deep .el-dialog {
  height: 500px !important;
}
.cadade {
  width: 500px;
  float: left;
  margin-top: 10px;
}
.el-input {
  width: 300px;
}

.footers {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px;
}
</style>